<template>
  <div>
    <div v-if="activeTodos.length">
      <el-row
        v-for="(item, index) in activeTodos"
        :key="index"
      >
        <span
          :class="[item.done == true ? 'done' : '']"
          @click="done(item.name)"
        >{{ index + 1 }}、{{ item.name }}</span>
      </el-row>
    </div>
    <div
      v-else
      class="null"
    >
      今天很棒哦！！！所有的事情都完成了！！！
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['activeTodos']),
  },
  methods: {
    done(name) {
      this.$store.dispatch('removeItem', name)
    },
  },
}
</script>
<style lang="less" scoped>
.el-row {
  margin-top: 20px;
}
.null {
  margin-top: 40px;
  color: green;
}
</style>
